<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Feature, Map, View} from 'ol';
    import XYZ from 'ol/source/XYZ';
    import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
    import {Vector as VectorSource} from 'ol/source'
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import {Point,LineString,Polygon} from 'ol/geom'
    import * as turf from '@turf/turf'

    export default {
        name: 'ProjectGeometryBuffer',
        mounted() {

            const image = new CircleStyle({
                radius: 5,
                fill: null,
                stroke: new Stroke({
                    color: 'blue',
                    width: 1
                }),
            });

            const styles = {
                'Point': new Style({
                    image: image,
                }),
                'LineString': new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        width: 1,
                    }),
                }),
                'MultiLineString': new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        width: 1,
                    }),
                }),
                'MultiPoint': new Style({
                    image: image,
                }),
                'MultiPolygon': new Style({
                    stroke: new Stroke({
                        color: 'yellow',
                        width: 1,
                    }),
                    fill: new Fill({
                        color: 'rgba(255, 255, 0, 0.1)',
                    }),
                }),
                'Polygon': new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        lineDash: [4],
                        width: 3,
                    }),
                    fill: new Fill({
                        color: 'rgba(0, 0, 255, 0.1)',
                    }),
                }),
                'GeometryCollection': new Style({
                    stroke: new Stroke({
                        color: 'magenta',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'magenta',
                    }),
                    image: new CircleStyle({
                        radius: 10,
                        fill: null,
                        stroke: new Stroke({
                            color: 'magenta',
                        }),
                    }),
                }),
                'Circle': new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'rgba(255,0,0,0.2)',
                    }),
                }),
            };

            const styleFunction = function (feature) {
                return styles[feature.getGeometry().getType()];
            };


            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new XYZ({
                            url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
                                'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
                        })
                    })
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 26.126468438108688],   //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 5   //缩放到的级别
                })
            });

            //添加矢量数据
            this.vectorSource = new VectorSource();
            let vectorLayer = new VectorLayer({
                source: this.vectorSource,
                style: styleFunction,
            });
            this.map.addLayer(vectorLayer);

            //点缓冲
            let pointFeature = new Feature({
                geometry: new Point([113.06167602539062, 23.08162680876907])
            });
            this.vectorSource.addFeature(pointFeature);
            //创建turfjs的点
            let point = turf.point([113.06167602539062, 23.08162680876907]);
            //基于点缓冲，单位m,
            let pointBuffered = turf.buffer(point, 1000, {units: 'meters', steps: 128});
            console.log(pointBuffered)
            let geometry = pointBuffered.geometry;
            console.log(geometry);
            //基于缓冲的几何体创建缓冲图形
            this.createBuffer(pointBuffered.geometry.coordinates)

            //线缓冲
            let lineStringFeature = new Feature({
                geometry: new LineString([[113.00674438476562, 22.992530787175006], [113.1976318359375, 23.040561494558183], [113.22990417480467, 23.116996102048127], [113.25531005859375, 23.183288403039526]])
            });
            this.vectorSource.addFeature(lineStringFeature);
            //创建turfjs的线
            let lineString = turf.lineString([[113.00674438476562, 22.992530787175006], [113.1976318359375, 23.040561494558183], [113.22990417480467, 23.116996102048127], [113.25531005859375, 23.183288403039526]]);
            let lineStringBuffered = turf.buffer(lineString, 1000, {units: 'meters', steps: 12});
            //创建线的缓冲面
            this.createBuffer(lineStringBuffered.geometry.coordinates)

            //面缓冲
            let polygonFeature = new Feature({
                geometry: new Polygon([[[113.12690734863281, 23.20348524670303], [113.11935424804688, 23.173820082731126], [113.16810607910155, 23.15425009841184],
                    [113.21342468261719, 23.18455079512732], [113.20793151855469, 23.22304802913141], [113.12690734863281, 23.20348524670303]]])
            });
            this.vectorSource.addFeature(polygonFeature);
            //创建turfjs的多边形
            let polygon = turf.polygon([[[113.12690734863281, 23.20348524670303], [113.11935424804688, 23.173820082731126], [113.16810607910155, 23.15425009841184],
                [113.21342468261719, 23.18455079512732], [113.20793151855469, 23.22304802913141], [113.12690734863281, 23.20348524670303]]]);
            let polygonBuffered = turf.buffer(polygon, 1000, {units: 'meters', steps: 12});

            //创建面缓冲图形
            this.createBuffer(polygonBuffered.geometry.coordinates)

        },
        methods: {
            createBuffer(coordinates) {
                // 创建缓冲图层
                let bufferLayer = new VectorLayer({
                    source: new VectorSource({
                        features: [
                            new Feature({
                                geometry: new Polygon(coordinates)
                            })
                        ]
                    })
                });
                // 定义缓冲样式
                let bufferStyle = new Style({
                    stroke: new Stroke({
                        color: "red",
                        width: 3
                    }),
                    fill: new Fill({
                        color: "rgba(220, 10, 20, 0.3)"
                    })
                });
                bufferLayer.setStyle(bufferStyle);
                // 添加相交图层到地图
                this.map.addLayer(bufferLayer);
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
